<template>
  <view class="goods-detail-container">
    <!-- 赠送普通弹窗 -->
    <uni-popup ref="popup" backgroundColor="#fff">
      <view class="popup-content">
        <view class="popup-content-hd">
          赠送
        </view>
        <view class="popup-content-bd">
          <view class="popup-content-bd-tab">
            <text v-bind:class="{'current':iscur == 1}" @click="changeCur(1)">游戏好友</text>
            <text v-bind:class="{'current':iscur == 2}" @click="changeCur(2)">陌生人</text>
          </view>
          <view class="box-content" v-show="iscur == 1">
            <view class="box-content-item">
              <radio-group @change="handleChange($event)">
                <label class="radio" v-for="(item,index) in friendsList" v-bind:key="index">
                  <radio :value="item.uid" color="#FFA000" :checked="index === current" />
                  <text> {{item.name}}</text>
                </label>

              </radio-group>

            </view>
            <view class="wc" @click="close">
              完成
            </view>
          </view>
          <view class="box-content" v-show="iscur == 2">
            <view class="box-content-title">
              请填写接收账号的用户名

            </view>
            <input type="text" placeholder="请输入你想赠送的用户名" class="inpt" v-model="valName"></input>
            <view class="wc" @click="checkAccount">
              完成
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
    <!-- 赠送普通弹窗 -->
    <!-- 领取优惠券弹窗 -->
    <uni-popup ref="popup2" backgroundColor="#fff" border-radius="20rpx 20rpx 0rpx 0rpx" v-if="CouponLts.length>0">
      <view class="popup-content-hd2">
        优惠
      </view>
      <view class="popup-content-bd2">
        <view class="popup-content-bd2-tip">
          当前商品享受如下优惠
        </view>
      </view>
      <!-- 可用优惠券 -->
      <view class="yhq-has">
        <view>
          <view class="yhq-bg" v-for="(item, index) in CouponLts" @click="ReceiveCoupon(item.Coupon_id)" v-bind:class="{
                    all:
                      item.Coupon_type == 1 ||
                      (item.Coupon_type == 2 && item.Cfg_Package_id == 0),
                  }" v-bind:key="index" v-show="
                    item.Coupon_type == 1 ||
                    (item.Coupon_type == 2 && item.Cfg_Package_id == 0) ||
                    item.Coupon_type == 3 ||
                    (item.Coupon_type == 4 && item.Cfg_Package_id > 0)
                  ">
            <view class="yhq_box_left">
              <view class="lottry">
                <view class="tmtc" v-show="
                          item.Coupon_type == 3 ||
                          (item.Coupon_type == 4 && item.Cfg_Package_id > 0)
                        ">
                  <view v-if="item.Coupon_type == 1 || item.Coupon_type == 4">
                    最高减<span>{{ `${item.Cfg_Params_1 / 100}` }}</span>元
                  </view>
                  <view v-if="item.Coupon_type == 1 || item.Coupon_type == 3">
                    最高减<span>2000</span>元
                  </view>

                </view>

                <view class="inlottry-bd">
                  <view class="name01" v-show="item.Cfg_Params_2 > 0">
                    <text class="icon_bg" v-if="item.Coupon_type == 2 || item.Coupon_type == 4">满减券</text>
                    <text class="icon_bg" v-if="item.Coupon_type == 1 || item.Coupon_type == 3">折扣券</text>
                    <view class="rd" v-bind:title="item.Coupon_name">
                      {{ item.Coupon_name }}
                    </view>

                  </view>
                  <view class="priceHd">
                    <view class="priceHd_price" v-if="item.Coupon_type == 2 || item.Coupon_type == 4">
                      <text>{{ `${item.Cfg_Params_1 / 100}` }}</text>
                      <text>￥</text>
                    </view>
                    <view class="priceHd_price" v-if="item.Coupon_type == 1 || item.Coupon_type == 3">
                      <text>{{ `${item.Cfg_Params_1 / 10}` }}</text>
                      <text>折</text>
                    </view>
                    <view class="priceHd-tip"> {{ `满${item.Cfg_Params_2 / 100}可用` }}</view>
                  </view>
                  <view class="name02" v-if="item.Coupon_type == 3 || item.Coupon_type == 4">
                    限品类
                  </view>

                  <view class="name02" v-if="item.Coupon_type == 1 || item.Coupon_type == 2">
                    全品类
                  </view>

                  <view class="priceCenter" v-if="item.Cfg_Use_type == 1">
                    <em>{{ creatTime(item.Cfg_Use_stime) }}</em>
                    <em style="padding: 0 2px">至</em>
                    <em v-bind:title="creatTime(item.Cfg_Use_etime)">{{
                            creatTime(item.Cfg_Use_etime)
                          }}</em>
                  </view>
                  <view class="priceCenter" v-if="item.Cfg_Use_type == 2">
                    {{ recTime(item.Cfg_Rec_stime, item.Cfg_Use_times) }}
                  </view>
                </view>
                <view class="inlottry-hd">
                  立即领取
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 可用优惠券 -->
    </uni-popup>
    <!-- 领取优惠券弹窗 -->
    <view class="pic-box">
      <text class="news-big" v-if="(detailInfo.Goods_flag & 8) == 8"></text>
      <text class="hot-big" v-if="(detailInfo.Goods_flag  & 16) == 16"></text>
      <text class="rec-big" v-if="(detailInfo.Goods_flag  & 512) == 512"></text>
      <image v-bind:src="detailInfo.Goods_imgPath" mode="aspectFill"></image>
    </view>
    <view class="detail-info" v-if="detailInfo">
      <view class="detail-info-price">
        <view class="detail-info-price-left">
          <text class="now-price">￥<text class="now-price-num">{{detailInfo.Goods_price}}</text> </text>
          <text class="utils">{{detailInfo.Unit}}</text>
          <text class="old-price" v-if="detailObj.IsDiscount == 1">￥735</text>
        </view>
        <view class="detail-info-price-right">
          <uni-number-box :min="1" v-model="count" disabled="false"></uni-number-box>
        </view>
      </view>
      <view class="detail-info-name">
        <text class="dis_name">{{detailInfo.Goods_disName}}</text>
        <text class="scale" v-if="detailObj.IsDiscount == 1">限时折扣</text>
      </view>
      <view class="type-tag">
        <text class="tags">分类/标签</text><text class="tags-name">
          <text>{{detailInfo.Class_name}}/{{detailInfo.Tag}}</text></text>
      </view>
      <view class="desc-box">
        <view class="desc-box-left">
          简介：
        </view>
        <view class="desc-box-right">
          {{detailInfo.Goods_profile}}
        </view>
      </view>
    </view>
    <!--  <view class="coupon">
      <text class="coupon-name">优惠</text>
      <view class="coupon-item" v-for="(item,index) in CouponLts" v-bind:key="index" @click="CouponLqFn">
        <view class="priceHd_price" v-show="item.Coupon_type == 2 || item.Coupon_type == 4">
          <text>{{ `满${item.Cfg_Params_2 / 100}减￥${item.Cfg_Params_1 / 100}` }}</text>
        </view>

        <view class="priceHd_price" v-show="item.Coupon_type == 1 || item.Coupon_type == 3">
          <text>{{ `满${item.Cfg_Params_2 / 10}享${item.Cfg_Params_1 / 10}折` }}</text>
        </view>
      </view>

    </view> -->
    <view class="shop-desc">
      <view class="shop-desc-title">
        商品详情
      </view>
      <view class="shop-desc-info">
        <rich-text v-if="detailInfo.Goods_details != ''" :nodes="formatRichText(detailInfo.Goods_details)"></rich-text>
        <view v-if="detailInfo.Goods_details == ''">
          暂无详情……
        </view>
      </view>

    </view>
    <view class="goods_nav">
      <view class="goods_nav_tips">
         <text class="kefu_tx"></text> 
         <text class="wenzi">如订单支付或者物品发放有问题，请提交订单反馈</text>
         <text class="link-kefu" @tap="gotoMyOrderView">联系客服</text>
      </view>
      <uni-goods-nav :fill="true" :options="optionsApi" :buttonGroup="buttonGroup" @click="onClick"
        @buttonClick="buttonClick" />
    </view>

  </view>
</template>

<script>
  import md5 from "js-md5"
  import checkLogin from '@/mixins/checkLogin.js'
  import {
    mapState,
    mapGetters,
    mapActions
  } from 'vuex'
  export default {
    data() {
      return {
        current: '',
        iscur: 1,
        Goods_Id: 0,
        type: '',
        detailInfo: '',
        count: 1,
        valName: '',
        CouponLts: [],
        Class_id: '',
        optionsApi: [{
              icon: 'shop',
              text: '店铺'
            },
            {
              icon: 'cart',
              text: '购物车',
              info: 0
            }, {
              icon: 'gift',
              text: '赠送'
            }
          ],
        // 右侧按钮组的配置对象
        buttonGroup: [{
            text: '加入购物车',
            backgroundColor: '#ff0000',
            color: '#fff'
          },
          {
            text: '立即购买',
            backgroundColor: '#ffa200',
            color: '#fff'
          }
        ],
        friendsList: [],
        beGivenUid: 0
      };
    },
    mixins: [checkLogin],
    watch: {
      // 定义 total 侦听器，指向一个配置对象
      total: {
        // handler 属性用来定义侦听器的 function 处理函数
        handler(newVal) {       
          const findResult = this.optionsApi.find(x => x.text === '购物车')
          if (findResult) {
            findResult.info = newVal
          }
        },
        immediate: true
      }
    },
    computed: {
      ...mapState('m_cart', ['cart']),
      ...mapGetters('m_cart', ['total'])
    },
    onLoad(options) {
      console.log(options)
      if (options.scene) {
        const scene = decodeURIComponent(options.scene);
        var jsonStr = '{"' + scene.replace(/ /g, '", "').replace(/=/g, '": "') + '"}';
        this.Goods_Id = JSON.parse(jsonStr).goods_id;
      } else {
        this.Goods_Id = options.goods_id;
      }
      this.QueryGoodsById();
      this.QueryCouponByGoodsId();
    },
    methods: {
      ...mapActions("m_cart", ["AddWebCartGoods", "DeductWebCartGoods"]),
      // 自定义此页面的转发给好友(已经有全局的分享方法，此处会覆盖全局)
      onShareAppMessage(res) {
        return {
          title: `${this.detailInfo.Class_name}-${this.detailInfo.Goods_disName}`,
          path: `/subpkg/goods_detail/goods_detail?goods_id=${this.Goods_Id}`,
          imageUrl: this.detailInfo.Class_imgPath
        }
      },
      gotoMyOrderView() {
        uni.navigateTo({
          url: '/subpkg/my_order/my_order'
        })
      },
      // 自定义页面的分享到朋友圈
      onShareTimeline(res) {
        return {
          title: `${this.detailInfo.Class_name}-${this.detailInfo.Goods_disName}`,
          path: `/subpkg/goods_detail/goods_detail?goods_id=${this.Goods_Id}`,
          imageUrl: this.detailInfo.Class_imgPath
        }
      },
      changeCur(val) {
        this.iscur = val;
      },
      close() {
        uni.navigateTo({
          url: `/subpkg/order_view/order_view?goodsInfo=${encodeURIComponent(JSON.stringify(this.detailInfo))}&count=${this.count}&BegivenUid=${this.beGivenUid}`
        })

        this.$refs.popup.close()

      },
      CouponLqFn() {
        this.$refs.popup2.open('bottom')
      },
      handleChange(e) {
        this.beGivenUid = e.target.value;
      },
      toggle(type) {
        this.type = type
        // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
        this.$refs.popup.open(type)
        this.QueryFriends();
      },
      QueryGoodsById() {
        uni.$http.get(`/Query/QueryGoodsById?goodsId=${this.Goods_Id}`).then(({
          data: res
        }) => {
          console.log('lyl', res);
          this.detailInfo = res.data;
          this.Class_id = res.data.Class_id;
        })
      },
      formatRichText(html) { // 富文本内容格式化
        return html && html.replace(/<img[^>]*>/gi, function(match, capture) { // 查找所有的 img 元素
          return match.replace(/style=".*"/gi, '').replace(/style='.*'/gi, '') // 删除找到的所有 img 元素中的 style 属性
        }).replace(/\<img/gi, '<img style="width:100%;"') // 对 img 元素增加 style 属性，并设置宽度为 100%
      },
      onClick(e) {
        if (e.content.text === '购物车') {
          if (uni.getStorageSync('token') && uni.getStorageSync('userinfo') && JSON.parse(uni.getStorageSync(
              'userinfo')).userId > 0) {
            // 切换到购物车页面
            uni.switchTab({
              url: '/pages/cart/cart'
            })
          } else {
            this.seconds = 3;
            this.delayNavigate();
          }

        } else if (e.content.text === '赠送') {
            const   yaodouLts=["18108","18107","18106","17674"];
            if(yaodouLts.indexOf(this.Goods_Id) != -1){
              uni.showModal({
                title:'抱歉，妖豆暂不支持赠送功能!',
                duration: 2000
              });
            return
            }
          if (uni.getStorageSync('token') && uni.getStorageSync('userinfo') && JSON.parse(uni.getStorageSync(
              'userinfo')).userId > 0) {
            this.toggle('bottom')
          } else {
            this.seconds = 3;
            this.delayNavigate();
          }

        } else if (e.content.text === '店铺') {
          this.enterShop(this.Class_id);
        }
      },
      enterShop(cid) {
        const dotaArr = [69, 70, 92, 135, 193, 230, 233, 281, 284, 313, 384, 476, 488, 489, 1904];
        const imbaArr = [18, 19, 20];
        const ptArr = [7, 11, 93, 95, 97, 435, 583, 592, 22, 23, 24, 59, 60];
        console.log(dotaArr.indexOf(cid))
        if (dotaArr.indexOf(cid) >= 0) {
          return uni.navigateTo({
            url: '/subpkg/dota_view/dota_view'
          })
        } else if (imbaArr.indexOf(cid) >= 0) {
          return uni.navigateTo({
            url: '/subpkg/imba_view/imba_view'
          })

        } else if (ptArr.indexOf(cid) >= 0) {
          return uni.navigateTo({
            url: '/subpkg/pt_view/pt_view'
          })
        } else {
          return uni.navigateTo({
            url: '/subpkg/rpg_view/rpg_view?cid=' + cid
          })
        }

      },
      buttonClick(e) {
        if (e.content.text === '加入购物车') {
          if (uni.getStorageSync('token') && uni.getStorageSync('userinfo') && JSON.parse(uni.getStorageSync(
              'userinfo')).userId > 0) {
            const obj = {
              'beGivenUserId': 0,
              'goodsId': this.detailInfo.Goods_id,
              'count': this.count
            };
            this.AddWebCartGoods(obj);
          } else {
            this.seconds = 3;
            this.delayNavigate();
          }

        } else if (e.content.text === '立即购买') {
          if (uni.getStorageSync('token') && uni.getStorageSync('userinfo') && JSON.parse(uni.getStorageSync(
              'userinfo')).userId > 0) {
            uni.navigateTo({
              url: `/subpkg/order_view/order_view?goodsInfo=${encodeURIComponent(JSON.stringify(this.detailInfo))}&count=${this.count}`
            })
          } else {
            this.seconds = 3;
            this.delayNavigate();
          }
        }
      },
      //查询好友
      async QueryFriends() {
        const uid = JSON.parse(uni.getStorageSync('userinfo')).userId;
        const signMd5 = md5(`Bid=65&UserId=${uid}&key=C63A39419CE64F258ADFE3FAF5E63477`);;
        const result = await uni.$http.get(
          `/WebApi/Wap/Action?t=queryfriends&data=${JSON.stringify({Bid:65,UserId:uid,Sign:signMd5})}`
        )
        console.log('friend', result)
        const {
          data
        } = result;
        this.friendsList = data.data.friendsList;
      },
      //查询用户名账号
      async checkAccount() {
        if (this.valName) {
          const uid = JSON.parse(uni.getStorageSync('userinfo')).userId;
          const signMd5 = md5(`account=${this.valName}&Bid=65&UserId=${uid}&key=C63A39419CE64F258ADFE3FAF5E63477`);;
          const result = await uni.$http.get(
            `/WebApi/Wap/Action?t=queryuser&data=${JSON.stringify({Bid:65,UserId:uid,Sign:signMd5,account:this.valName})}`
          )
          console.log(result)
          const {
            data: res
          } = result
          if (res.code == 0) {
            uni.navigateTo({
              url: `/subpkg/order_view/order_view?goodsInfo=${encodeURIComponent(JSON.stringify(this.detailInfo))}&count=${this.count}&BegivenUid=${res.data.UserId}`
            })
            this.$refs.popup.close()
          } else {
            uni.showModal({
              title: res.msg,
              duration: 2000
            });
          }

        } else {
          uni.showModal({
            title: '请输入用户名称!',
            duration: 2000
          });
        }

      },
      creatTime(timestamp) {
        var date = new Date(
          parseInt(timestamp.replace("/Date(", "").replace(")/", ""), 10)
        );
        var Y = date.getFullYear() + "-";
        var M =
          (date.getMonth() + 1 < 10 ?
            "0" + (date.getMonth() + 1) :
            date.getMonth() + 1) + "";
        var D =
          (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
        var h =
          (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
        var m =
          date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var s =
          date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        return Y + M + "-" + D + h + m;
      },
      recTime(time1, time2 = 0) {
        console.log('time1', time1)
        var date = new Date(
          parseInt(time1.replace("/Date(", "").replace(")/", ""), 10)
        );

        if (time2) {
          var ms = date.getTime() + time2 * 1000;
        } else {
          var ms = date.getTime();
        }

        return this.getDateStr(ms);
      },
      getDateStr(ms) {
        if (ms) {
          var date = new Date(ms);
        } else {
          var date = new Date();
        }
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var minute =
          date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var second =
          date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        var currentTime =
          year + "-" + month + "-" + day + "  " + hour + ":" + minute;
        // +
        // ":" +
        // second;
        return currentTime;
      },
      //时间比较
      comptime(nowDate, lastDate) {
        var a = (Date.parse(nowDate) - Date.parse(lastDate)) / 3600 / 1000;
        if (a < 0) {
          return "lastDate";
        } else if (a >= 0) {
          return "nowDate";
        }
      },
      //查询指定商品优惠券
      async QueryCouponByGoodsId() {
        if (uni.getStorageSync('token') && uni.getStorageSync('userinfo') && JSON.parse(uni.getStorageSync(
            'userinfo')).userId > 0) {
          const uid = JSON.parse(uni.getStorageSync('userinfo')).userId;
          const signMd5 = md5(`Bid=65&goodsId=${this.Goods_Id}&UserId=${uid}&key=C63A39419CE64F258ADFE3FAF5E63477`);
          const result = await uni.$http.get(
            `/WebApi/Wap/Action?t=querycouponbygoodsid&data=${JSON.stringify({Bid:65,UserId:uid,Sign:signMd5,goodsId:this.Goods_Id})}`
          )
          console.log('kk', result)
          const {
            data: res
          } = result;
          if (res.code == 0) {
            this.CouponLts = res.data.list;

          }
        }

      },
      //领取优惠券
      async ReceiveCoupon(couponId) {
        const uid = JSON.parse(uni.getStorageSync('userinfo')).userId;
        const signMd5 = md5(`Bid=65&couponId=${couponId}&UserId=${uid}&key=C63A39419CE64F258ADFE3FAF5E63477`);
        const result = await uni.$http.get(
          `/WebApi/Wap/Action?t=receivecoupon&data=${JSON.stringify({Bid:65,UserId:uid,Sign:signMd5,couponId:couponId})}`
        )
        console.log('couponId', result);
        const {
          data: res
        } = result;
        if (res.code == 0) {
          uni.showModal({
            title: '领取成功,请去我的优惠券查看!',
            duration: 2000
          });
        } else {
          uni.showModal({
            title: res.msg,
            duration: 2000
          });
        }

      }
    }
  }
</script>

<style lang="scss">
  .uni-popup__wrapper {
    background-color: #fff;
  }

  .goods-detail-container {
    // 给页面外层的容器，添加 50px 的内padding，
    // 防止页面内容被底部的商品导航组件遮盖
    padding-bottom: 70px;

    .popup-content {
      height: 833rpx;
      background: #FFFFFF;
      border-radius: 20rpx 20rpx 0px 0px;

      .popup-content-hd {
        width: 100%;
        height: 98rpx;
        line-height: 98rpx;
        border-bottom: 2rpx solid #EFEFEF;
        text-align: center;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #1A1A1A;
      }

      .popup-content-bd {
        width: 676rpx;
        margin: 0 auto;
        height: 680rpx;
        overflow-y: auto;
        overflow-x: hidden;

        .popup-content-bd-tab {
          width: 676rpx;
          display: flex;
          flex-direction: row;
          justify-content: space-around;

          text {
            flex: 50%;
            text-align: center;
            height: 100rpx;
            line-height: 100rpx;
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #1A1A1A;
            position: relative;

            &.current::after {
              content: '';
              width: 60px;
              height: 4px;
              background: #FFA000;
              border-radius: 2rpx;
              position: absolute;
              left: 50%;
              transform: translate(-50%);
              top: 80rpx;
            }
          }
        }

        .box-content {
          width: 100%;

          .wc {
            width: 676rpx;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            background: #FFA000;
            border-radius: 4rpx;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
          }

          .box-content-title {
            width: 674rpx;
            margin: 0 auto;
            text-align: left;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #1A1A1A;
            margin-top: 50rpx;
            margin-bottom: 50rpx;
          }

          .inpt {
            width: 666rpx;
            height: 78rpx;
            margin: 0 auto;
            line-height: 78rpx;
            padding-left: 10rpx;
            background: #F5F5F5;
            border-radius: 6px;
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
            margin-bottom: 284rpx;
          }

          .box-content-item {
            width: 100%;
            height: 500rpx;
            overflow-y: hidden;

            label {
              width: 672rpx;
              height: 78rpx;
              line-height: 78rpx;
              background: #FFFFFF;
              border: 1rpx solid #EFEFEF;
              border-radius: 6rpx;
              font-size: 26rpx;
              font-family: PingFang SC;
              font-weight: 500;
              color: #1A1A1A;
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              margin-top: 20rpx;

              text {
                flex: 50%;
                text-align: center;
              }

              radio {
                flex: 50%;
                text-align: center;
              }
            }
          }
        }
      }
    }
  }

  .pic-box {
    height: 750rpx;
    margin-bottom: 15rpx;
    position: relative;

    .news-big {
      width: 100%;
      height: 750rpx;
      background: url(https://img.5211game.com/Base/xiaochengxu/static/news-big.png);
      background-size: contain;
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 3;
    }

    .hot-big {
      width: 100%;
      height: 750rpx;
      background: url(https://img.5211game.com/Base/xiaochengxu/static/hot-big.png);
      background-size: contain;
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 2;
    }

    .rec-big {
      width: 100%;
      height: 750rpx;
      background: url(https://img.5211game.com/Base/xiaochengxu/static/rec-big.png);
      background-size: contain;
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 1;
    }

    image {
      width: 100%;
      height: 100%;
    }
  }

  .detail-info {
    width: 680rpx;
    min-height: 240rpx;
    padding: 20rpx;
    background: #FFFFFF;
    border-radius: 8rpx;
    margin: 0 auto;

    .detail-info-price {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .detail-info-price-left {
        .now-price {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 800;
          color: #E33F2A;

          .now-price-num {
            font-size: 42rpx;
            font-family: PingFang SC;
            font-weight: 800;
            color: #E33F2A;
          }
        }

        .utils {
          font-size: 20rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #E33F2A;
          margin: 0 10rpx;
        }

        .old-price {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          text-decoration: line-through;
          color: #9A9A9A;
        }
      }
    }

    .detail-info-name {
      display: flex;
      overflow: hidden;
      align-items: center;
      margin-top: 20rpx;

      .dis_name {
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #000000;
        margin-right: 20rpx;
      }

      .scale {
        width: 96rpx;
        height: 28rpx;
        line-height: 28rpx;
        text-align: center;
        background: linear-gradient(90deg, #EE8924 0%, #EC632B 100%);
        border-radius: 6rpx;
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
      }
    }

    .type-tag {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
      margin: 20rpx 0;
      display: flex;
      align-items: center;

      .tags {
        margin-right: 10rpx;
      }
    }

    .tags-name {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
    }

    .desc-box {
      display: flex;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;

      .desc-box-left {
        flex: 1
      }

      .desc-box-right {
        flex: 7;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        line-height: 30rpx;
      }
    }
  }

  .shop-desc {
    width: 690rpx;
    margin: 0 auto;
    border-radius: 8rpx;
    padding: 15rpx;
    margin-top: 15rpx;
    background-color: #fff;

    .shop-desc-title {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #000000;
      margin-bottom: 15rpx;
    }

    .shop-desc-info {
      font-size: 24rpx;
    }
  }

  .coupon {
    width: 680rpx;
    background: #FFFFFF;
    border-radius: 8rpx;
    padding: 20rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 15rpx auto;

    .coupon-name {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #EA586D;
      margin-right: 10rpx;
    }

    .coupon-item {
      padding: 0 4rpx;
      height: 42rpx;
      line-height: 42rpx;
      text-align: center;
      background: #FFFFFF;
      border: 2rpx solid #ED7E90;
      border-radius: 6rpx;
      font-size: 22rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #EA586D;
      margin-right: 10rpx;
      margin-top: 10rpx;
    }
  }



  .goods_nav {
    // 为商品导航组件添加固定定位
    background-color: #FFFFFF;
    padding-bottom: 20px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    .goods_nav_tips{
      width:100%;
      height:50rpx;
       background-color:rgba(0, 0, 0, 0.5);
         font-size: 26rpx;
         color:#fff;
         display: flex;
         justify-content:flex-start;
         align-items: center;
         padding:10rpx;
       .kefu_tx{
         width:33rpx;
         height:34rpx;
         background: url(https://img.5211game.com/Base/xiaochengxu/static/kefu_tx.png);
         background-size: contain;
       }
       .wenzi{
         margin:0 10rpx;
       }
       .link-kefu{
         width:120rpx;
         height:46rpx;
         line-height:46rpx;
         text-align: center;
         background-color: #ff0000;
         font-size:24rpx;
         color:#fff;
         display: block;
         border-radius: 20rpx;
       }
    }
  }

  .popup-content-hd2 {
    width: 100%;
    height: 98rpx;
    line-height: 98rpx;
    background-color: #FFFFFF;
    border-radius: 20rpx 20rpx 0 0;
    border-bottom: 2rpx solid #EFEFEF;
    text-align: center;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #1A1A1A;
  }

  .popup-content-bd2 {
    width: 100%;
    overflow: hidden;
    zoom: 1;
    background-color: #FFFFFF;
  }

  .popup-content-bd2-tip {
    width: 657rpx;
    margin: 0 auto;
    height: 120rpx;
    line-height: 120rpx;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #1A1A1A;
  }

  .yhq-has {
    width: 100%;

    .yhq-bg {
      width: 648.5rpx;
      height: 163rpx;
      margin: 0 auto;
      padding: 20rpx 0rpx 20rpx 33rpx;
      margin-bottom: 26rpx;
      background-image: url(https://img.5211game.com/Base/xiaochengxu/static/yhq.png);
      background-size: contain;

      .lottry {
        width: 657rpx;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        position: relative;

        .tmtc {
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 500;
          position: absolute;
          top: 0rpx;
          right: 220rpx;
          color: #EA586D;
        }


        .inlottry-bd {

          .priceHd {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;

            .priceHd-tip {
              margin-left: 10rpx;
              font-size: 22rpx;
              font-family: PingFang SC;
              font-weight: 500;
              color: #E9445A;
            }

            .priceHd_price {
              text-align: center;
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              font-size: 40rpx;
              font-family: PingFang SC;
              font-weight: 800;
              color: #E9445A;
            }
          }

          width: 72%;
          height: 163rpx;
          display: flex;
          flex-direction: column;

          .rd {
            font-size: 22rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666;
            margin: 6rpx 0;
          }

          .name01 {
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .icon_bg {
              width: 87rpx;
              height: 28rpx;
              line-height: 28rpx;
              text-align: center;
              background: #FFEBF0;
              border: 1rpx solid #ED7E90;
              border-radius: 4rpx;
              font-size: 20rpx;
              font-family: PingFang SC;
              font-weight: 500;
              color: #EA586D;
              margin-right: 10rpx;
            }
          }

          .name02 {
            font-size: 22rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
            margin: 2rpx 0;
          }

          .priceCenter {
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
          }
        }

        .inlottry-hd {
          width: 26%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #E9445A;
        }
      }
    }

  }
</style>